<template>
  <div id="app">
    <el-container>
      <el-header>
        <h1>商品管理后台</h1>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true" @select="nowPage" active-text-color="#409EFF">
          <el-menu-item :index="v.path" v-for="(v,i) in jurisdiction" :key="i">{{v.name}}</el-menu-item>
          <!-- <el-menu-item index="/homeframe/home">首页</el-menu-item>
          <el-menu-item index="/homeframe/goods">商品</el-menu-item>
          <el-menu-item index="/homeframe/order">订单</el-menu-item>
          <el-menu-item index="/homeframe/users">用户</el-menu-item>
          <el-menu-item index="/homeframe/promotion">促销</el-menu-item>
          <el-menu-item index="/homeframe/operate">运营</el-menu-item>
          <el-menu-item index="/homeframe/statistics">统计</el-menu-item>
          <el-menu-item index="/homeframe/jurisdiction">权限</el-menu-item> -->
        </el-menu>
        <div id="user">
          <i class="el-icon-user"></i>
          <span>{{name}}</span>
          <i class="el-icon-bell"></i>
          <i class="el-icon-circle-close" @click="unlogin"></i>
        </div>
      </el-header>
      <el-container>
        <router-view />
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      jurisdiction: []
    }
  },
  mounted() {
    this.setSesson();
  },
  computed: {
    activeIndex() {
      return this.$store.state.nowIndex
    }
  },
  methods: {
    nowPage(indexPath) {
      this.$store.commit('changePage', indexPath);
    },
    unlogin() {
      this.$confirm('是否退出登录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sessionStorage.clear();
        this.$store.commit('changeUser', {});
        this.$router.replace({ path: '/' });
      })
    },
    setSesson() {
      if (sessionStorage.getItem("store")) {
        let sessionData = JSON.parse(sessionStorage.getItem("store"));
        this.name = sessionData.usermsg.name;
        this.jurisdiction = JSON.parse(sessionData.usermsg.jurisdiction);
      } else {
        this.$router.replace({ path: '/' })
      };
    }
  }
}
</script>

<style lang="less">
.el-header,
.el-footer {
  background-color: #b3c0d1;
  line-height: 60px;
}

.el-aside {
  height: 100%;
  float: left;
  background-color: #d3dce6;
  line-height: 200px;
  .el-menu-vertical-demo {
    height: 100%;
  }
}

.el-main {
  height: 100%;
  width: 88%;
  float: left;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-container {
  height: 100%;
}
.el-header {
  h1 {
    width: 20%;
    float: left;
  }
}
.el-menu--horizontal {
  float: left;
  width: 60%;
  background-color: #b3c0d1;
  .el-menu-item {
    padding: 0 10px;
    color: white;
  }
}

#user {
  float: left;
  text-align: right;
  width: 20%;
  font-size: 16px;
  span {
    margin-right: 10px;
    cursor: pointer;
  }
}
.el-icon-circle-close,
.el-icon-bell,
.el-icon-user {
  cursor: pointer;
  margin: 0 10px;
}
.el-icon-circle-close {
  color: rgb(26, 11, 11);
}
</style>
